<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { sessionLogDetail } from '../../../service/api'

import { useRoute } from 'vue-router'
const route = useRoute()

const { appContext } = getCurrentInstance()
const proxy = appContext.config.globalProperties
const config = proxy.$config

const show = ref(false)
const list = ref([])

onMounted(() => {
  sessionLogDetail(
    {
      sessionId: route.query.id
    },
    true
  )
    .then((res) => {
      res.sessionList.forEach((item) => {
        if (item.type === 2) {
          try {
            item.answer = JSON.parse(item.content)
          } catch (error) {
            item.answer = item.content
          }
        }
        list.value.push(item)
      })
      show.value = true
    })
    .catch((err) => {
      proxy.$toast(err)
    })
})
</script>

<template>
  <div
    class="page-detail"
    v-if="show"
  >
    <template v-if="list.length !== 0">
      <div
        class="item van-hairline--bottom"
        v-for="(item, index) in list"
        :key="index"
      >
        <template v-if="item.type == 1">
          <div class="top">
            <span>我</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="content">
            {{ item.content }}
          </div>
        </template>

        <template v-else>
          <div class="top">
            <span>数字人</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div
            class="content"
            v-if="typeof item.answer === 'string'"
            v-html="item.content"
          />
          <div
            v-if="typeof item.answer === 'object' && item.answer.type === 0"
            class="content"
            v-html="config.apologyHint"
          />
          <div
            v-if="typeof item.answer === 'object' && item.answer.type === 1"
            class="content"
            v-html="item.answer.knowledge.content"
          />
          <div
            v-if="typeof item.answer === 'object' && item.answer.type === 3"
            class="content"
            v-html="item.answer.questions"
          />
          <div
            v-if="typeof item.answer === 'object' && item.answer.type === 2"
            class="content"
          >
            <li
              v-for="(item1, index1) in item.answer.questions"
              :key="index1"
            >
              {{ item1.name }}
            </li>
          </div>
        </template>
      </div>
    </template>
    <template v-else>
      <div class="empty">
        <img src="../../../assets/img/empty.png">
        <span>暂无历史会话记录</span>
      </div>
    </template>
  </div>
</template>

<style lang="less">
.page-detail {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0 0.16rem;
  font-size: 0.24rem;
  color: #333333;
  overflow-y: auto;
  .item {
    padding: 0.32rem 0.16rem;
    line-height: 0.34rem;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.18rem;
      font-size: 0.28rem;
    }
    &:last-child.van-hairline--bottom {
      border: none;
    }
    .content {
      white-space: pre-wrap;
      li {
        list-style-type: decimal;
        list-style-position: inside;
      }
      img {
        width: 100%;
      }
    }
  }
  .empty {
    text-align: center;
    padding-top: 1.76rem;
    color: #b7bfcc;
    font-size: 0.28rem;
    img {
      display: block;
      width: 3.96rem;
      height: 3.96rem;
      margin: 0 auto;
    }
    span {
      display: block;
      margin-top: 0.2rem;
    }
  }
}
</style>
